<template>
  <div class="full-box">
    <v-chart class="chart" :option="chartOption" autoresize/>
  </div>
</template>

<script>
import vChart from "vue-echarts";
import refreshMixin from "@/package/widget/mixins/refreshMixin";
import {funEval} from "@/utils/FunUtil";
import * as echarts from 'echarts'

export default {
  name: 'map02',
  cnName: '通用地图',
  mixins: [refreshMixin],
  components: {vChart},
  data() {
    return {
      chartOption: {},
      cptData: {}
    }
  },
  methods: {
    async loadDataOk() {
      if(!this.option.attribute.optionFn) {
        return
      }
      const fn = funEval(this.option.attribute.optionFn)
      const fnResult = fn(echarts, this.cptData)
      let option = {}
      if(Object.prototype.toString.call(fnResult) === '[object Promise]') {
        fnResult.then(d => {
          option = d
          this.chartOption = option
        })
      } else {
        option = fnResult
        this.chartOption = option
      }
    }
  },
  watch: {
    'option.attribute': {
      handler(newVal) {
        this.loadDataOk(newVal)
      },
      deep: true
    }
  },
}
</script>
